<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { NAvatar, NCard, NGi, NGrid, NSpace, NText, useMessage } from 'naive-ui';
// 使用useSvgIcon hook代替直接导入SvgIcon组件
import { useAppStore } from '@/store/modules/app';
// // import { useSvgIcon } from '@/hooks/common/svg-icon'; // 未使用的导入
import BasicInfo from './modules/basic-info.vue';
import AccountSecurity from './modules/account-security.vue';
import PhoneDialog from './modules/phone-dialog.vue';
import EmailDialog from './modules/email-dialog.vue';
import PasswordDialog from './modules/password-dialog.vue';

// 移除未使用的SvgIcon相关代码

// 默认头像
const defaultAvatar = 'https://via.placeholder.com/120';

const appStore = useAppStore();

const gap = computed(() => (appStore.isMobile ? 0 : 16));

// 消息提示
const message = useMessage();

// 用户信息
const userInfo = reactive({
  name: '测试用户',
  username: 'testuser',
  nickname: '测试昵称',
  avatar: '',
  email: '',
  phone: '',
  bio: '',
  registerTime: '2023-01-01 10:00:00', // 注册时间
  uuid: '8a7b6c5d-4e3f-2g1h-9i0j-klmnopqrstuv' // 用户UUID
});

// 表单数据
const profileFormData = reactive({
  username: userInfo.username,
  nickname: userInfo.nickname,
  bio: userInfo.bio
});

// 密码修改表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 密码强度
const passwordStrength = ref(0);

// 手机号表单
const phoneForm = reactive({
  phone: '',
  captcha: '',
  smsCode: ''
});

// 邮箱表单
const emailForm = reactive({
  email: '',
  captcha: '',
  emailCode: ''
});

// 引用
const formRef = ref();
const passwordFormRef = ref();
const avatarInput = ref();

// 弹窗控制
const showPhoneDialog = ref(false);
const showEmailDialog = ref(false);
const showPasswordDialog = ref(false);

// 验证码URL
const phoneCaptchaUrl = ref('');
const emailCaptchaUrl = ref('');

// 验证码错误信息
const phoneCaptchaError = ref('');
const emailCaptchaError = ref('');

// 倒计时
const countDown = ref(0);
const emailCountDown = ref(0);

// 加载状态
const savingProfile = ref(false);
const changingPassword = ref(false);
const bindingPhone = ref(false);
const bindingEmail = ref(false);
const refreshingPhoneCaptcha = ref(false);
const refreshingEmailCaptcha = ref(false);
const emailLoading = ref(false);

// 触发头像上传
const triggerAvatarUpload = () => {
  avatarInput.value?.click();
};

// 计算密码强度
const calculatePasswordStrength = (password: string) => {
  if (!password) {
    passwordStrength.value = 0;
    return;
  }

  let strength = 0;
  // 长度检查
  if (password.length >= 8) strength += 1;
  if (password.length >= 12) strength += 1;
  // 包含数字
  if (/\d/.test(password)) strength += 1;
  // 包含小写字母
  if (/[a-z]/.test(password)) strength += 1;
  // 包含大写字母
  if (/[A-Z]/.test(password)) strength += 1;
  // 包含特殊字符
  if (/[^A-Za-z0-9]/.test(password)) strength += 1;

  passwordStrength.value = Math.min(strength, 5);
};

// 监听密码变化计算强度
watch(
  () => passwordForm.newPassword,
  newVal => {
    calculatePasswordStrength(newVal);
  }
);

// 获取密码强度信息（未使用）
const getPasswordStrengthInfo = () => {
  const strengthTexts = ['', '弱', '较弱', '中等', '较强', '强'];
  const strengthColors = ['', '#ff4d4f', '#faad14', '#faad14', '#52c41a', '#1890ff'];

  const level = Math.min(passwordStrength.value, 5);
  return {
    text: strengthTexts[level],
    color: strengthColors[level],
    width: `${level * 20}%`
  };
};

// 处理头像上传
const handleAvatarUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;

  // 增强文件类型验证
  const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
  if (!validTypes.includes(file.type)) {
    message.error('请上传JPG、PNG、GIF或WebP格式的图片');
    return;
  }

  // 增加文件大小限制到5MB
  const maxSize = 5 * 1024 * 1024;
  if (file.size > maxSize) {
    message.error('图片大小不能超过5MB');
    return;
  }

  // 创建FormData对象
  const formData = new FormData();
  formData.append('avatar', file);

  try {
    // 显示上传中状态
    message.info('头像上传中...');

    // 模拟上传延迟
    await new Promise(resolve => {
      setTimeout(resolve, 1000);
    });

    // 模拟成功，实际项目中应该调用真实的上传接口
    await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = e => {
        userInfo.avatar = e.target?.result as string;
        message.success('头像上传成功');
        resolve(null);
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  } catch {
    message.error('头像上传失败，请重试');
  } finally {
    // 清空input，允许重复上传同一个文件
    target.value = '';
  }
};

// 保存基本信息
const handleSaveProfile = async () => {
  if (!(await formRef.value?.validate())) return;

  savingProfile.value = true;
  try {
    // 模拟保存请求
    // await updateUserProfile(profileFormData)

    // 更新用户信息
    userInfo.username = profileFormData.username;
    userInfo.nickname = profileFormData.nickname;
    userInfo.bio = profileFormData.bio;

    message.success('保存成功');
  } catch {
    message.error('保存失败，请重试');
  } finally {
    savingProfile.value = false;
  }
};

// 修改密码
const handleChangePassword = async () => {
  if (!(await passwordFormRef.value?.validate())) return;

  changingPassword.value = true;
  try {
    // 模拟修改密码请求
    // await changePassword(passwordForm)

    message.success('密码修改成功，请重新登录');

    // 清空表单
    passwordForm.oldPassword = '';
    passwordForm.newPassword = '';
    passwordForm.confirmPassword = '';
    passwordStrength.value = 0;
    // 关闭弹窗
    showPasswordDialog.value = false;
  } catch {
    message.error('密码修改失败，旧密码可能不正确');
  } finally {
    changingPassword.value = false;
  }
};

// 刷新验证码
const refreshCaptcha = (type: 'phone' | 'email') => {
  // 模拟刷新验证码，添加随机参数防止缓存
  const timestamp = Date.now();
  if (type === 'phone') {
    // 使用一个临时的随机验证码图片作为模拟，实际项目中应该调用真实接口
    phoneCaptchaUrl.value = `https://picsum.photos/200/80?random=${timestamp}`;
  } else {
    emailCaptchaUrl.value = `https://picsum.photos/200/80?random=${timestamp + 1}`;
  }
};

// 验证码错误处理（未使用）
const handleCaptchaError = (type: 'phone' | 'email') => {
  // 验证码加载失败时，使用备用文本显示
  if (type === 'phone') {
    refreshingPhoneCaptcha.value = false;
    phoneCaptchaError.value = '验证码加载失败，请点击刷新';
  } else {
    refreshingEmailCaptcha.value = false;
    emailCaptchaError.value = '验证码加载失败，请点击刷新';
  }
};

// 邮箱脱敏显示
const maskEmail = (email: string) => {
  if (!email || !email.includes('@')) return email;
  const [prefix, suffix] = email.split('@');
  if (prefix.length <= 3) {
    return `${prefix[0]}***@${suffix}`;
  }
  return `${prefix.substring(0, 3)}***@${suffix}`;
};

// 手机号脱敏显示
const maskPhone = (phone: string) => {
  if (!phone || phone.length < 11) return phone;
  return `${phone.substring(0, 3)}****${phone.substring(7)}`;
};

// 发送短信验证码（未使用）
const sendSmsCode = async () => {
  try {
    // 先验证手机号格式
    const phonePattern = /^1[3-9]\d{9}$/;
    if (!phoneForm.phone) {
      message.error('请输入手机号');
      return;
    }

    if (!phonePattern.test(phoneForm.phone)) {
      message.error('请输入有效的手机号');
      return;
    }

    // 验证图形验证码
    if (!phoneForm.captcha) {
      message.error('请输入图形验证码');
      return;
    }

    if (phoneForm.captcha.length < 4) {
      message.error('图形验证码不正确');
      return;
    }

    // 模拟发送短信的加载状态
    bindingPhone.value = true;

    // 模拟网络延迟
    await new Promise(resolve => {
      setTimeout(() => resolve(null), 1500);
    });

    // 模拟发送短信
    // sendSms(phoneForm.phone, phoneForm.captcha)

    // 开始倒计时
    countDown.value = 60;
    const timer = setInterval(() => {
      countDown.value -= 1;
      if (countDown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);

    message.success('短信验证码已发送，请注意查收');
  } catch {
    message.error('验证码发送失败，请检查图形验证码是否正确');
  } finally {
    bindingPhone.value = false;
  }
};

// 发送邮箱验证码（未使用）
const sendEmailCode = async () => {
  try {
    // 先验证邮箱格式
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailForm.email) {
      message.error('请输入邮箱');
      return;
    }

    if (!emailPattern.test(emailForm.email)) {
      message.error('请输入有效的邮箱地址');
      return;
    }

    // 验证图形验证码
    if (!emailForm.captcha) {
      message.error('请输入图形验证码');
      return;
    }

    if (emailForm.captcha.length < 4) {
      message.error('图形验证码不正确');
      return;
    }

    // 模拟发送邮箱的加载状态
    bindingEmail.value = true;

    // 模拟网络延迟
    await new Promise(resolve => {
      setTimeout(resolve, 1500);
    });

    // 模拟发送邮箱验证码
    // sendEmail(emailForm.email, emailForm.captcha)

    // 开始倒计时
    emailCountDown.value = 60;
    const timer = setInterval(() => {
      emailCountDown.value -= 1;
      if (emailCountDown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);

    message.success('邮箱验证码已发送，请注意查收');
  } catch {
    message.error('验证码发送失败，请检查图形验证码是否正确');
  } finally {
    bindingEmail.value = false;
  }
};

// 重置手机号表单（未使用）
const resetPhoneForm = () => {
  phoneForm.phone = '';
  phoneForm.captcha = '';
  phoneForm.smsCode = '';
  countDown.value = 0;
  refreshCaptcha('phone');
};

// 确认绑定手机号
const confirmPhoneBinding = async (formData: { phone: string; captcha: string; smsCode: string }) => {
  bindingPhone.value = true;
  try {
    // 额外验证手机号和验证码格式
    const phonePattern = /^1[3-9]\d{9}$/;
    if (!phonePattern.test(formData.phone)) {
      message.error('请输入有效的手机号');
      return;
    }

    const codePattern = /^\d{6}$/;
    if (!codePattern.test(formData.smsCode)) {
      message.error('请输入有效的6位数字验证码');
      return;
    }

    // 模拟网络延迟
    await new Promise(resolve => {
      setTimeout(() => resolve(null), 1000);
    });

    // 模拟绑定请求
    // await bindPhone(formData)

    // 模拟脱敏显示手机号
    const maskedPhone = formData.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    const operation = userInfo.phone ? '更换' : '绑定';
    userInfo.phone = maskedPhone;
    showPhoneDialog.value = false;
    message.success(`手机号${operation}成功`);
  } catch {
    message.error('验证码错误或已过期，请重新获取');
  } finally {
    bindingPhone.value = false;
  }
};

// 重置邮箱表单（未使用）
const resetEmailForm = () => {
  emailForm.email = '';
  emailForm.captcha = '';
  emailForm.emailCode = '';
  emailCountDown.value = 0;
  refreshCaptcha('email');
};

// 确认绑定邮箱
const confirmEmailBinding = async (formData: { email: string; captcha: string; emailCode: string }) => {
  bindingEmail.value = true;
  try {
    // 额外验证邮箱和验证码格式
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(formData.email)) {
      message.error('请输入有效的邮箱地址');
      return;
    }

    const codePattern = /^\d{6}$/;
    if (!codePattern.test(formData.emailCode)) {
      message.error('请输入有效的6位数字验证码');
      return;
    }

    // 模拟网络延迟
    await new Promise(resolve => {
      setTimeout(() => resolve(null), 1500);
    });

    // 模拟绑定请求
    // await bindEmail(formData)

    // 模拟脱敏显示邮箱
    const operation = userInfo.email ? '更换' : '绑定';
    userInfo.email = formData.email;
    showEmailDialog.value = false;
    message.success(`邮箱${operation}成功`);
  } catch {
    message.error('验证码错误或已过期，请重新获取');
  } finally {
    bindingEmail.value = false;
  }
};

// 组件挂载时初始化
onMounted(() => {
  // 模拟获取用户信息
  // getUserInfo().then(data => {
  //   Object.assign(userInfo, data)
  //   Object.assign(formData, { username: data.username, nickname: data.nickname, bio: data.bio })
  // })

  // 刷新验证码
  refreshCaptcha('phone');
  refreshCaptcha('email');
});
</script>

<template>
  <NSpace vertical :size="16">
    <div class="user-center-header">
      <h1>个人中心</h1>
    </div>

    <NSpace vertical :size="gap">
      <!-- 头像上传区域 -->
      <div class="avatar-section">
        <div class="avatar-container">
          <NAvatar
            round
            :size="120"
            :src="userInfo.avatar || defaultAvatar"
            class="user-avatar"
            @click="triggerAvatarUpload"
            @mouseenter="
              ($event: MouseEvent) => (($event.currentTarget as HTMLElement).style.transform = 'scale(1.05)')
            "
            @mouseleave="($event: MouseEvent) => (($event.currentTarget as HTMLElement).style.transform = 'scale(1)')"
          >
            {{ userInfo.name || userInfo.username ? (userInfo.name || userInfo.username).charAt(0) : 'U' }}
          </NAvatar>
          <input
            ref="avatarInput"
            type="file"
            class="avatar-input"
            accept="image/jpeg,image/png,image/gif,image/webp"
            @change="handleAvatarUpload"
          />
          <!-- 移除独立上传按钮，通过点击头像直接触发上传 -->
          <div class="avatar-tip">
            <NText text-type="secondary" depth="3" :size="12">
              点击头像上传，支持JPG、PNG、GIF、WebP格式，大小不超过5MB
            </NText>
          </div>
        </div>
        <div class="user-info">
          <h2>{{ userInfo.name || userInfo.username || '用户名' }}</h2>
          <p class="user-detail">{{ userInfo.phone ? maskPhone(userInfo.phone) : '未绑定手机号' }}</p>
          <p class="user-detail">{{ userInfo.email ? maskEmail(userInfo.email) : '未绑定邮箱' }}</p>
          <p class="user-detail secondary">注册时间：{{ userInfo.registerTime }}</p>
          <p class="user-detail secondary">用户ID：{{ userInfo.uuid }}</p>
        </div>
      </div>

      <!-- 基本信息和账号安全在同一行布局 -->
      <NGrid :x-gap="24" :y-gap="24" responsive="screen" item-responsive>
        <NGi span="24 s:24 m:12">
          <NCard title="基本信息" class="section-card">
            <BasicInfo v-model:form-data="profileFormData" :loading="savingProfile" @save="handleSaveProfile" />
          </NCard>
        </NGi>
        <NGi span="24 s:24 m:12">
          <NCard title="账号安全" class="section-card">
            <AccountSecurity
              :user-info="userInfo"
              @show-phone-dialog="showPhoneDialog = true"
              @show-email-dialog="showEmailDialog = true"
              @show-password-dialog="showPasswordDialog = true"
            />
          </NCard>
        </NGi>
      </NGrid>

      <!-- 弹窗组件 -->
      <PhoneDialog
        v-model:show="showPhoneDialog"
        :has-phone="!!userInfo.phone"
        :phone="userInfo.phone"
        :loading="bindingPhone"
        @confirm="confirmPhoneBinding"
      />

      <EmailDialog
        v-model:show="showEmailDialog"
        :has-email="!!userInfo.email"
        :email="userInfo.email"
        :loading="bindingEmail"
        @confirm="confirmEmailBinding"
      />

      <PasswordDialog v-model:show="showPasswordDialog" :loading="changingPassword" @confirm="handleChangePassword" />
    </NSpace>
  </NSpace>
</template>

<style scoped lang="scss">
// 基础动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 主容器样式
.user-center {
  padding: 24px;
  width: 100%;
  min-height: 100vh;
  background-color: rgb(var(--container-bg-color));
}

// 标题区域
.user-center-header {
  margin-bottom: 32px;
  text-align: center;
  animation: fadeIn 0.6s ease-out;
  h1 {
    font-size: 32px;
    font-weight: 700;
    color: rgb(var(--base-text-color));
    margin: 0;
    letter-spacing: -0.5px;
  }
}

// 内容区域
.user-center-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

// 头像区域
.avatar-section {
  display: flex;
  align-items: center;
  padding: 32px;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: fadeIn 0.6s ease-out 0.1s both;
  background-color: rgb(var(--container-bg-color));
  box-shadow: var(--sider-box-shadow);

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

.avatar-container {
  position: relative;
  margin-right: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-avatar {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid rgb(var(--container-bg-color));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  &:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
}

/* 已移除独立上传按钮，不再需要此样式 */

.avatar-tip {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  animation: fadeIn 0.6s ease-out 0.3s both;
}

.user-info {
  h2 {
    margin-bottom: 16px;
  }

  .user-detail {
    &.secondary {
      color: rgba(0, 0, 0, 0.35);
      font-size: 13px;
      margin-top: 8px;
    }
  }

  h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    animation: slideIn 0.5s ease-out 0.2s both;
  }

  .user-detail {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    margin: 8px 0;
    animation: slideIn 0.5s ease-out 0.3s both;

    &.highlight {
      color: rgb(var(--primary-color));
      font-weight: 500;
    }
  }
}

// 卡片样式
.section-card {
  background-color: rgb(var(--container-bg-color));
  border-radius: 12px;
  box-shadow: var(--sider-box-shadow);
  transition: all 0.3s ease;
  border: none;
  animation: fadeIn 0.6s ease-out;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  &:deep(.n-card__header) {
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(var(--container-bg-color));
    border-radius: 12px 12px 0 0;
  }

  &:deep(.n-card__title) {
    font-size: 20px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
  }

  &:deep(.n-card__content) {
    padding: 24px;
  }
}

// 安全项样式
.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 0 -12px;
  padding: 20px 12px;

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateX(4px);
  }
}

.security-label {
  display: flex;
  align-items: center;
  gap: 16px;

  .label-text {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
  }

  .security-status {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    transition: all 0.3s ease;

    &.bound {
      background: rgba(82, 196, 26, 0.1);
      color: #52c41a;
      border: 1px solid rgba(82, 196, 26, 0.3);
    }

    &.unbound {
      background: rgba(250, 140, 22, 0.1);
      color: #fa8c16;
      border: 1px solid rgba(250, 140, 22, 0.3);
    }
  }
}

.security-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
  margin: 0;
}

// 表单按钮区域
.form-actions {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);

  .n-button {
    min-width: 80px;
    padding: 8px 24px;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }
}

// 验证码样式
.captcha-image {
  width: 100%;
  height: 40px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.15);

  &:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
    border-color: rgb(var(--primary-color));
  }

  &:active {
    transform: scale(0.98);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .captcha-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }
}

// 验证码加载中样式
[v-loading] {
  opacity: 0.6;
}

// 密码强度样式
.password-strength {
  margin-top: 12px;

  .strength-bar {
    height: 6px;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

    .strength-fill {
      height: 100%;
      transition:
        width 0.3s ease,
        background-color 0.3s ease;
      border-radius: 3px;
      box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1);

      &.weak {
        background-color: #ff4d4f;
      }

      &.medium {
        background-color: #faad14;
      }

      &.strong {
        background-color: #52c41a;
      }
    }
  }

  .strength-text {
    font-size: 13px;
    margin-top: 6px;
    text-align: right;
    font-weight: 500;

    &.weak {
      color: #ff4d4f;
    }

    &.medium {
      color: #faad14;
    }

    &.strong {
      color: #52c41a;
    }
  }
}

// 密码提示样式
.password-tips {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid rgb(var(--primary-color));
}

// 表单元素优化
.n-form-item {
  margin-bottom: 24px;
  transition: all 0.3s ease;

  &:focus-within {
    transform: translateX(4px);
  }

  &__label {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }
}

.n-input {
  transition: all 0.3s ease;
  border-radius: 6px;

  &:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15);
  }
}

// 按钮全局样式优化
.n-button {
  transition: all 0.3s ease;
  border-radius: 6px;
  font-weight: 500;

  &.primary {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    border: none;

    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #40a9ff, #69c0ff);
      box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
    }
  }

  &.ghost {
    &:hover:not(:disabled) {
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }
  }
}

// 弹窗样式优化
.n-modal {
  &:deep(.n-modal__overlay) {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }

  &:deep(.n-modal__content) {
    background-color: rgb(var(--container-bg-color)) !important;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  }

  &:deep(.n-modal__header) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    background-color: rgb(var(--container-bg-color));
  }

  &:deep(.n-modal__title) {
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  &:deep(.n-modal__body) {
    padding: 24px;
    background-color: rgb(var(--container-bg-color));
  }

  &:deep(.n-modal__footer) {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0 0 8px 8px;
  }
}

// 响应式设计优化
@media (max-width: 768px) {
  .user-center {
    padding: 16px;
    background-color: rgb(var(--container-bg-color));
  }

  .user-center-header h1 {
    font-size: 24px;
  }

  .user-center-content {
    gap: 20px;
  }

  .avatar-section {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    border-radius: 8px;

    .avatar-container {
      margin-right: 0;
      margin-bottom: 20px;
    }
  }

  .user-info h2 {
    font-size: 22px;
  }

  .user-detail {
    font-size: 14px;
  }

  .section-card {
    border-radius: 8px;

    &:deep(.n-card__header) {
      padding: 16px 20px 12px;
    }

    &:deep(.n-card__title) {
      font-size: 18px;
    }

    &:deep(.n-card__content) {
      padding: 20px;
    }
  }

  .security-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0;
    margin: 0 -8px;
    padding: 16px 8px;

    &:hover {
      transform: translateX(2px);
    }
  }

  .security-label {
    gap: 12px;

    .label-text {
      font-size: 15px;
    }
  }

  .security-item .n-button {
    margin-top: 12px;
    width: 100%;
  }

  .form-actions {
    flex-direction: column-reverse;
    margin-top: 20px;

    .n-button {
      width: 100%;
    }
  }

  .password-tips {
    font-size: 12px;
    padding: 10px;
  }

  .captcha-image {
    height: 36px;
  }
}

@media (max-width: 480px) {
  .user-center {
    padding: 12px;
  }

  .avatar-section {
    padding: 16px;
  }

  .section-card :deep(.n-card__content) {
    padding: 16px;
  }
}

// 成功状态的动画效果
@keyframes successPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
  }
}

.success-animation {
  animation: successPulse 1s;
}

.user-avatar {
  cursor: pointer;
  transition: transform 0.2s;
}

.avatar-input {
  display: none;
}
</style>
